<template>
  <div class="outerTemplate" >
    <goods-classify-header
      ref="classifyHeader"
      v-if="secList"
      :pageTitle="pageTitle"
      :classifyList="classifyList"
      :isShowTapHead="isShowTapHead"
      :goodsClassCode="goodsCode"
      :secList="secList">
      <!--<div style="position:absolute; width: 100% ; height: 0;bottom:0;z-index: 10" slot="aniamteRefresh">-->
        <!--<animate-refresh-pull>-->

        <!--</animate-refresh-pull>-->
      <!--</div>-->

    </goods-classify-header>
    <goods-classify-list v-if="secList"
                         :goodsCode="goodsCode"
                         :secList="secList"
                         :paddingTop="paddingTop"
                         @changeIsShowTapHead="changeIsShowTapHead"
                         ref="goodsClassifyList">
    </goods-classify-list>

    <add-cart-animate>
    </add-cart-animate>
  </div>
</template>

<script>
  import GoodsClassifyHeader from './GoodsClassifyHeader';
  import GoodsClassifyList from './GoodsClassifyList';
  import AnimateRefresh from '@/real-components/AnimateRefresh';
  import AddCartAnimate from '@/real-components/AddCartAnimate';
  import {mapGetters} from 'vuex';
  import {getPageTree, initDomTree} from '../../utils/getPageTree';
  import AnimateRefreshPull from '@/real-components/AnimateRefreshPull'

  export default {
    data() {
      return {
        msg: '这是测试首页',
        page: 'goodsClassify',
        type: {
          list: 'list',
          header: 'header',
        },
        goodsCode: null, //分类编码
        pageTitle: '', //分类名称
        secList: '', //二级分类列表
        isShowTapHead: false,
        paddingTop: '2.2rem',
      };
    },
    components: {
      GoodsClassifyHeader,
      GoodsClassifyList,
      AddCartAnimate,
      AnimateRefresh,
      AnimateRefreshPull
    },
    methods: {
      //初始化goodsCode
      _initGoodsCode() {
        this.goodsCode = this.$route.query.code || null;
      },
      //初始化二级分类列表
      _initSecList(data) {
        this.secList = data.secList;
      },
      _changePage() {
        var goodsClassCode = this.$route.query.classCode;
        var classifyList = this.$store.state.cjy.classifyList;
        var changeClassifyList = this.$store.getters['cjy/classifyData'];
        if (classifyList) {
          var classifyDetail = classifyList.find(item => {
            return item.goodsclasscode == goodsClassCode;
          });
          if (classifyDetail) {
            if (classifyDetail.level == 1) {
              this.$router.replace({path: 'goodsClassify', query: {code: classifyDetail.goodsclasscode}});
            } else if (classifyDetail.level == 2) {
              var parentclasscode = classifyDetail.parentclasscode;
              var firstClassifyDetail = changeClassifyList.find(item => {
                return parentclasscode == item.goodsclasscode;
              });
              if (firstClassifyDetail) {
                var index = firstClassifyDetail.secList.findIndex(item => {
                  return item.goodsClassCode == goodsClassCode;
                });
              }

              if (index == -1) {
                this.$router.replace({
                  path: 'goodsClassify',
                  query: {code: classifyDetail.parentclasscode},
                });
              } else {
                this.$router.replace({
                  path: 'goodsClassify',
                  query: {code: classifyDetail.parentclasscode, pageIndex: index},
                });
              }
            }
          }
        } else {
          return;
        }
      },
      changeIsShowTapHead(data) {
        this.isShowTapHead = !data;
      },
    },

    computed: {
      ...mapGetters(['getDomTree']),
      pageTree() {
        return getPageTree(this, this.page);
      },
      // 获取分类列表
      classifyList() {
        return this.$store.getters['cjy/classifyData'];
      },
      // 获取当前页面需要的一级分类
      currentClassifyList() {
        if (this.classifyList) {
          var goodsCode = this.goodsCode;

          if (!goodsCode) {
            //如果页面没有传入 goodscode 返回空值不执行
            return null;
          }

          //查找本页面需要的1级分类列表
          var activeClassify = this.classifyList.find(item => {
            return item.goodsclasscode == goodsCode;
          });
          if (activeClassify) {
            return activeClassify;
          }
        }

        return null;
      },
      activeImage() {
        return;
      },
    },

    watch: {
      $route() {
        this._initGoodsCode();
        var pageIndex = this.$route.query.pageIndex || 0;
        var isReturn = this.$store.state.cjy.isReturn;
        if (!isReturn) {
          this.$store.commit('cjy/CHANGE_PAGE_POS_Y', 0);
        }
        this.$store.dispatch('cjy/changeClassifyIndex', pageIndex);
      },
      currentClassifyList(data) {
        if (data) {
          this.pageTitle = data.goodsclassname; //初始化一级分类标题
          this._initSecList(data); // 初始化二级分类列表
        }
      },
    },
    beforeCreate() {
      var pageIndex = this.$route.query.pageIndex || 0;
      this.$store.dispatch('cjy/changeClassifyIndex', pageIndex);
      if (!this.$store.getters['cjy/classifyData']) {
        this.$store.dispatch('cjy/queryClassifyList');
      }
      // if (!this.$store.getters['cjy/classifyImageList']) {
      // 	this.$store.dispatch('cjy/queryClassifyBanner');
      // }
    },
    created() {
      this._changePage(); //改变页面
      this._initGoodsCode(); //初始化一级分类Code
    },
    mounted() {
    },
    updated() {
      this.$nextTick(() => {
        var classifyHeader = this.$refs.classifyHeader;
      });
    },
    beforeRouteLeave(to, from, next) {
      var goodsClassifyList = this.$refs.goodsClassifyList;
      goodsClassifyList && goodsClassifyList.savePageNum();
      var name = from.name;
      this.$store.commit('cjy/SET_RETURN_POS', name);
      next();
    },
  };
</script>

<style scoped>
  .outerTemplate {
    padding-top: 3rem;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }
</style>
